---
title: 編輯器設定
description: 設定好你的編輯器來開發 Astro。
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

自訂你的程式編輯器來改善 Astro 的開發體驗並啟用新功能。

## VS Code

[VS Code](https://code.visualstudio.com/) 是受網頁開發者歡迎的程式編輯器，由 Microsoft 開發。一些著名的線上編輯器如 [GitHub Codespaces](https://github.com/features/codespaces) 以及 [Gitpod](https://gitpod.io/) 也都是藉由 VS Code 的引擎來驅動的。

即使 Astro 可以在任何程式編輯器運作，但我們建議使用 VS Code 作為 Astro 專案的編輯器。我們有維護一個官方的 [Astro VS Code 延伸模組](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)，其能改善開發 Astro 專案的體驗並帶來一些關鍵的功能。

- 在 `.astro` 檔案中能夠突顯程式語法
- 在 `.astro` 檔案中顯示 TypeScript 的型別資訊
- [VS Code 智能提醒](https://code.visualstudio.com/docs/editor/intellisense) 可帶來程式碼自動完成、提示等

讓我們直接開始，今天就來安裝 [Astro VS Code 延伸模組](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) 吧。

import ReadMore from '~/components/ReadMore.astro';

<ReadMore>看看如何在你的 Astro 專案[設定 TypeScript](/zh-tw/guides/typescript/)。</ReadMore>

## Zed

[Zed](https://zed.dev/) 是高效能、可多人協作的程式編輯器，對速度及大型專案做了最佳化。它們的 [Astro 延伸模組](https://zed.dev/extensions/astro)包括 `.astro` 檔案的語法突顯、程式碼自動完成、格式化、診斷和移至定義等功能。

## JetBrains IDE

[Webstorm](https://www.jetbrains.com/webstorm/) 是 JavaScript 和 TypeScript 的 IDE，在 2024.2 版本新增對 Astro 語言伺服器的支援。這個更新帶來包括語法突顯、程式碼自動完成和格式化等功能。

您可以透過 [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) 或在 IDE 的「外掛程式」標籤中搜尋「Astro」來安裝官方外掛程式。你可以在這個地方開啟或關閉語言伺服器：`Settings | Languages & Frameworks | TypeScript | Astro`。

要知道更多關於 Webstorm 對 Astro 支援的資訊，請查看[官方的 Webstorm Astro 文件](https://www.jetbrains.com/help/webstorm/astro.html)。

## 其他程式編輯器

我們厲害的社群也為了其他有名的編輯器維護了數個延伸模組，以下包括：

- [Open VSX 的 VS Code 延伸模組](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge text="官方" /></span> - 官方的 Astro VS Code 延伸模組，對部分編輯器如 [Cursor](https://cursor.com) 或 [VSCodium](https://vscodium.com/) 可到 Open VSX registry 取得
- [Vim 外掛](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="社群" /></span> - 在 Vim 或 Neovim 中可以提供 Astro 語法突顯、縮排及程式碼摺疊功能
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/configs.md#astro) 及 [TreeSitter](https://github.com/virchau13/tree-sitter-astro) 外掛 <span style="margin: 0.25em;"><Badge class="neutral-badge" text="社群" /></span> - 在 Neovim 中可以提供語法突顯、treesitter 解析及程式碼自動完成功能
- Emacs - 請參閱[設定Emacs 和Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) 的說明<span style="margin: 0.25em;"><Badge class="neutral-badge" text="社群" /></span>來與 Astro 合作
- [Sublime Text 的 Astro 語法突顯](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="社群" /></span > - Sublime Text 的 Astro 套件，可在 Sublime Text 套件管理器上獲取
- [Nova 延伸模組](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="社群" /></span> - 在 Nova 中可以提供 Astro 的語法突顯以及程式碼自動完成功能

## 線上編輯器

除了在本地端使用編輯器外，Astro 在線上編輯器也能運作良好，以下包括：

- [StackBlitz](https://stackblitz.com/) 和 [CodeSandbox](https://codesandbox.io/) - 線上編輯器可在你的瀏覽器上執行，且有支援 `.astro` 檔案的語法突顯。完全不需要安裝以及設定！
- [GitHub.dev](https://github.dev/) - 可以讓你將 Astro 的 VS Code 延伸模組以[瀏覽器擴充功能](https://code.visualstudio.com/api/extension-guides/web-extensions)的方式安裝，其可取得一些延伸模組的功能，而目前只支援語法突顯。
- [IDX](https://idx.dev) 和 [Gitpod](https://gitpod.io/) - 雲端上完整的開發環境，可以在 Open VSX 上安裝官方 Astro 的 VS Code 延伸模組。

## 其他工具

### ESLint

[ESLint](https://eslint.org/) 是有名的 JavaScript 及 JSX 的程式碼分析工具。[社群維護的外掛](https://github.com/ota-meshi/eslint-plugin-astro)可以下載來增加對 Astro 的支援。

詳細資訊可至[該專案的使用說明](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/)來了解如何為你的專案安裝及設定 ESLint。

### Stylelint

[Stylelint](https://stylelint.io/) 是一種流行的 CSS linter。[社群維護的 Stylelint 組態](https://github.com/ota-meshi/stylelint-config-html) 提供 Astro 支援。

安裝說明、編輯器整合和其他資訊可以在專案的 README 文件中找到。

### Biome

[Biome](https://biomejs.dev/) 是為網頁開發打造的全方位程式碼分析與格式化工具。[Biome 目前對 `.astro` 檔案有實驗性的支援](https://biomejs.dev/internals/language-support/#html-super-languages-support)，可以用來分析並格式化 `.astro` 檔案中的 frontmatter。

### Prettier

[Prettier](https://prettier.io/) 是個熱門的格式化工具，用來格式化 JavaScript、HTML、CSS 等。如果你使用 [Astro VS Code 擴充功能](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)，Prettier 程式碼格式化功能已經有納入了。

要在編輯器外部（例如 CLI）或不支援我們的編輯器工具的編輯器內部增加對格式化 `.astro` 檔案的支援，請安裝[官方 Astro Prettier 外掛](https://github.com/withastro/prettier-plugin-astro)。

<Steps>
1. 安裝 `prettier` 和 `prettier-plugin-astro`。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install --save-dev --save-exact prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add --save-dev --save-exact prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add --dev --exact prettier prettier-plugin-astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. 在專案最上層新增 `.prettierrc` 組態檔（或 `.prettierrc.json`、`.prettierrc.mjs` 或[其他支援格式](https://prettier.io/docs/configuration)），然後在檔案加上 `prettier-plugin-astro`。

    也在這個檔案手動指定 Astro 檔案用的剖析器。

    ```json title=".prettierrc"
    {
      "plugins": ["prettier-plugin-astro"],
      "overrides": [
        {
          "files": "*.astro",
          "options": {
            "parser": "astro"
          }
        }
      ]
    }
    ```

3. 你可以選擇為專案安裝其他 Prettier 外掛，並加進組態檔。加上的這些外掛可能需要以特定順序列出。舉例來說，如果你使用 Tailwind，`prettier-plugin-tailwindcss` 必須是 [plugins 陣列的最後一個 Prettier 外掛](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins)。

    ```json title=".prettierrc"
    {
      "plugins": [
        "prettier-plugin-astro",
        "prettier-plugin-tailwindcss" // 需要放最後
      ],
      "overrides": [
        {
          "files": "*.astro",
          "options": {
            "parser": "astro"
          }
        }
      ]
    }
    ```

4. 在終端機執行以下指令來格式化檔案。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx prettier . --write
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec prettier . --write
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn exec prettier . --write
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

參閱 [Prettier 外掛的 README](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) 來了解它所支援的選項以及如何在 VS Code 內設定 Prettier 等等資訊。

### dprint

[dprint](https://dprint.dev/) 是高度可設定的格式化工具，支援 JavaScript, TypeScript, CSS 及更多程式語言。可以使用 [markup_fmt plugin](https://github.com/g-plane/markup_fmt) 增加對 `.astro` 檔案的支援。
